$(function () {
    console.log('开始初始化地图...');

    // 地图实例
    let myChart = null;
    let tooltip = null;

    // 初始化工具提示
    function initTooltip() {
        tooltip = $('<div class="weather-info-tooltip" style="display: none;"></div>');
        $('body').append(tooltip);
    }

    // 加载郑州市地图数据
    function loadZhengzhouMap() {
        return new Promise((resolve, reject) => {
            $.getJSON('js/zhengzhou.json')
                .done(function(zhengzhouJson) {
                    console.log('郑州市地图数据加载成功');
                    // 注册地图
                    echarts.registerMap('zhengzhou', zhengzhouJson);
                    resolve(zhengzhouJson);
                })
                .fail(function(jqxhr, textStatus, error) {
                    console.error('郑州市地图数据加载失败:', textStatus, error);
                    reject(error);
                });
        });
    }

    // 初始化基础地图
    function initBaseMap() {
        const mapElement = document.getElementById('map_1');
        if (!mapElement) {
            console.error('未找到地图容器 #map_1');
            return;
        }

        myChart = echarts.init(mapElement);
        console.log('ECharts地图实例已创建');

        // 先显示加载状态
        myChart.showLoading();

        // 尝试加载郑州市地图
        loadZhengzhouMap()
            .then(() => {
                // 使用郑州市地图
                initZhengzhouMap();
            })
            .catch(() => {
                // 如果郑州市地图加载失败，使用中国地图
                console.log('使用中国地图作为备选');
                initChinaMap();
            })
            .finally(() => {
                myChart.hideLoading();
            });
    }

    // 初始化郑州市地图
    function initZhengzhouMap() {
        console.log('初始化郑州市地图');

        const option = {
            title: {
                text: '郑州市实时气象数据',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            geo: {
                map: 'zhengzhou',
                roam: false,
                label: {
                    show: false,
                    color: '#fff',
                    fontSize: 12
                },
                itemStyle: {
                    areaColor: '#4c60ff',
                    borderColor: '#002097',
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#293fff'
                    },
                    label: {
                        show: false,
                        color: '#fff',
                        fontWeight: 'bold'
                    }
                }
            },
            series: [{
                type: 'scatter',
                coordinateSystem: 'geo',
                data: generateDistrictData(),
                symbolSize: 15,
                label: {
                    show: true,
                    formatter: function (params) {
                        return params.data.name; // 只显示地区名称，去除温度
                    },
                    position: 'right',
                    color: '#fff',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    padding: [4, 6],
                    borderRadius: 4
                },
                itemStyle: {
                    color: '#4cd137' // 统一使用绿色，不再根据温度判断颜色
                }
            }]
        };

        myChart.setOption(option);
        console.log('郑州市地图已设置');

        // 添加点击事件
        myChart.on('click', function (params) {
            if (params.componentType === 'series') {
                console.log('点击了区域:', params.data);
                showDistrictTooltip(params.event.event, params.data);
            } else if (params.componentType === 'geo') {
                console.log('点击了地图区域:', params.name);
                showSimpleTooltip(params.event.event, params.name, '点击查看详细数据');
            }
        });
    }

    // 初始化中国地图（备选）
    function initChinaMap() {
        console.log('初始化中国地图');

        const option = {
            title: {
                text: '郑州市位置',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16
                }
            },
            geo: {
                map: 'china',
                roam: true,
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 12
                },
                itemStyle: {
                    areaColor: '#4c60ff',
                    borderColor: '#002097',
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        areaColor: '#293fff'
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        fontWeight: 'bold'
                    }
                }
            },
            series: [{
                type: 'effectScatter',
                coordinateSystem: 'geo',
                data: [[113.665412, 34.757975]], // 郑州的经纬度
                symbolSize: 20,
                label: {
                    show: true,
                    formatter: '郑州市',
                    position: 'right',
                    color: '#fff',
                    backgroundColor: 'rgba(0,0,0,0.7)',
                    padding: [4, 6],
                    borderRadius: 4
                },
                itemStyle: {
                    color: '#ff6b6b'
                },
                emphasis: {
                    scale: true
                }
            }]
        };

        myChart.setOption(option);
    }

    // 生成区域数据
    function generateDistrictData() {
        const districtCoordinates = {
            '中原区': [113.531576, 34.768286, 25.6],
            '二七区': [113.565422, 34.670936, 26.1],
            '管城回族区': [113.735313, 34.706453, 25.8],
            '金水区': [113.696037, 34.795838, 26.3],
            '上街区': [113.298282, 34.798689, 24.9],
            '惠济区': [113.61836, 34.888591, 25.2],
            '中牟县': [114.022521, 34.721976, 25.1],
            '巩义市': [112.98283, 34.75218, 24.8],
            '荥阳市': [113.391523, 34.689077, 25.4],
            '新密市': [113.380616, 34.537846, 25.0],
            '新郑市': [113.73967, 34.394219, 25.7],
            '登封市': [113.037768, 34.459939, 24.6]
        };

        return Object.keys(districtCoordinates).map(district => {
            return {
                name: district,
                value: districtCoordinates[district]
            };
        });
    }

    // 显示区域工具提示
    function showDistrictTooltip(event, data) {
        if (!tooltip) {
            initTooltip();
        }
        // 更新实时气象图表
        if (typeof window.updateWeatherCharts === 'function') {
            window.updateWeatherCharts(data.name);
        }
        const tooltipContent = `
            <div class="weather-tooltip-header">
                <h4>${data.name} - 实时数据</h4>
            </div>
            <div class="weather-tooltip-content">
                <div class="weather-details">
                    <div class="weather-info-item">
                        <span class="label">经度:</span>
                        <span class="value">${data.value[0]}</span>
                    </div>
                    <div class="weather-info-item">
                        <span class="label">纬度:</span>
                        <span class="value">${data.value[1]}</span>
                    </div>
                    <div class="weather-info-item">
                        <span class="label">状态:</span>
                        <span class="value">实时监测中</span>
                    </div>
                </div>
            </div>
        `;

        showTooltipAtPosition(event, tooltipContent);
    }

    // 显示简单工具提示
    function showSimpleTooltip(event, district, message) {
        if (!tooltip) {
            initTooltip();
        }

        const tooltipContent = `
            <div class="weather-tooltip-header">
                <h4>${district}</h4>
            </div>
            <div class="weather-tooltip-content">
                <div class="weather-details">
                    <div class="weather-info-item">
                        <span class="value">${message}</span>
                    </div>
                </div>
            </div>
        `;

        showTooltipAtPosition(event, tooltipContent);
    }

    // 显示工具提示（通用方法）
    function showTooltipAtPosition(event, content) {
        tooltip.html(content).show();

        const mouseX = event.clientX;
        const mouseY = event.clientY;

        // 获取工具提示尺寸
        const tooltipWidth = tooltip.outerWidth();
        const tooltipHeight = tooltip.outerHeight();

        // 获取窗口尺寸
        const windowWidth = $(window).width();
        const windowHeight = $(window).height();

        // 计算最佳位置
        let targetX = mouseX + 15;
        let targetY = mouseY + 15;

        // 防止超出屏幕
        if (targetX + tooltipWidth > windowWidth) {
            targetX = mouseX - tooltipWidth - 15;
        }
        if (targetY + tooltipHeight > windowHeight) {
            targetY = mouseY - tooltipHeight - 15;
        }

        tooltip.css({
            left: targetX + 'px',
            top: targetY + 'px'
        });

        tooltip.hide().fadeIn(200);
    }

    // 隐藏工具提示
    function hideTooltip() {
        if (tooltip && tooltip.is(':visible')) {
            tooltip.fadeOut(2000);
        }
    }

    // 文档点击事件
    $(document).on('click', function (e) {
        if (!$(e.target).closest('.weather-info-tooltip').length) {
            hideTooltip();
        }
    });

    // 窗口调整大小时重绘
    $(window).on('resize', function() {
        if (myChart) {
            myChart.resize();
        }
    });

    // 主初始化函数
    function init() {
        console.log('开始初始化地图组件...');
        initTooltip();
        initBaseMap();
        console.log('地图初始化完成');
    }

    // 延迟初始化，确保DOM完全加载
    setTimeout(init, 50);
});